<style scoped>
	.goods {
		padding: 10px;
	}
	
	.goods-context {
		/*border: 1px solid #eee;*/
	}
	
	.goodstree-header {
		height: 35px;
		background: #EEEEEE;
		border-right: 1px solid #eee;
	}
	
	.goodstree-header span {
		line-height: 35px;
		margin-left: 10px;
		font-family: inherit;
		font-size: 14px;
		color: #1c2438;
		font-weight: 700;
	}
	
	.goods-tree {
		padding: 10px;
		height: 700px;
		border: 1px solid #eee;
	}
	
	.goods-tree .ivu-tree .ivu-tree-title {
		font-size: 14px;
	}
	
	.goods-tree .ivu-tree .ivu-tree-arrow {
		font-size: 14px;
	}
	
	.goods-search {
		width: 1800px;
	}
	
	.goods-patent-type {
		margin: 0 15px;
		width: 200px;
	}
	
	.goods-patent-typename {
		margin: 0 15px;
		width: 200px;
	}
	
	.goods-patent-dep {
		width: 200px;
		margin: 0 15px;
	}
	
	.goods-table {
		padding-top: 10px;
	}
	
	.table-page {
		margin-top: 10px;
		float: right;
	}
</style>
<template>
	<div class="goods">
		<div class="goods-context">
			<Row :gutter="15">
				<Col span="4">
				<div class="goodstree-header">
					<span>{{goodPageLabal[0].fcn}}</span>
				</div>
				<div class="goods-tree">
					<Tree :data="baseData" @on-select-change="choseGoodsType"></Tree>
				</div>
				</Col>
				<Col span="20">
				<div class="goods-right-context">
					<div class="goods-search">
						<span>{{goodPageLabal[1].fcn}}</span>
						<Input class="goods-patent-type" v-model="parentType" disabled></Input>
						<span>{{goodPageLabal[2].fcn}}</span>
						<Input class="goods-patent-typename" v-model="goodsName"></Input>
						<span>{{goodPageLabal[3].fcn}}</span>
						<Input class="goods-patent-dep" v-model="dutyDep"></Input>
						<Button type="primary" @click="addGoodsType">新增</Button>
						<Button type="primary">保存</Button>
						<Button type="error">删除</Button>
					</div>
					<div class="goods-table">
						<tablePage :list="lists" v-on:goto="goto"></tablePage>
						<Table :columns="columns1" :data="items"></Table>
						<Page :total="total" show-total class="table-page"></Page>
					</div>
				</div>
				</Col>
			</Row>
		</div>
	</div>
</template>

<script>
	import tablePage from '../../components/tablePage.vue';
	export default {
		components: {
			tablePage,
		},
		data() {
			return {
				thisPage: 1,
				pageSize: 10,
				total: 0,
				//查询条件
				parentType: '',
				parentTypeId: '',
				goodsName: '',
				dutyDep: '',

				columns1: [{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: '序号',
						width: 60,
						align: 'center',
						key: 'fid'
					},
					{
						title: '物资类别',
						key: 'fname'
					},
					{
						title: '物资型号',
						key: 'fmodel'
					},
					{
						title: '生产厂家',
						key: 'fmanufacturer'
					},
					{
						title: '生产日期',
						key: 'fmanutime'
					},
					{
						title: '配发日期',
						key: 'fcreatetime'
					}
				],
				items: [],
				//table page  child component
				lists: [{
					totalsize: 50,
					current: 1,
					allpage: 13
				}],
				baseData: [{
					expand: true,
					title: 'parent 1',
					children: [{
						title: 'parent 1-0',
						expand: true,
						disabled: true,
						children: [{
							title: 'leaf',
							disableCheckbox: true
						}, {
							title: 'leaf',
						}]
					}, {
						title: 'parent 1-1',
						expand: true,
						checked: true,
						children: [{
							title: '<span style="color: red">leaf</span>',
						}]
					}]
				}],
				//goodpagelabal
				goodPageLabal: [{
					fcn: ' 物资类型'
				}, {
					fcn: '上级类别：'
				}, {
					fcn: '类别名称：'
				}, {
					fcn: '责任单位：'
				}]
			}

		},
		methods: {
			//分页请求ajax  table page  child component
			goto: function(index) {
				console.info('parent' + index)
			},
			addGoodsType() {
				let param = {
					fdepno:this.dutyDep ,
					fpid: this.parentTypeId,
					fname: this.goodsName
				}
				this.$http.post(this.url + '/Goods/insert/type', param).then(response => {
					let isOk = response.data;
					//console.info(isOk.obj)
					if(isOk.success) {
						console.log("-------------")
						console.log(isOk.obj)
						this.getGoodsType();//回调树
						 this.goodsName='';
						 this.dutyDep ='';
						console.log("-------------")
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});
			},
			getGoodsType() {
				this.$http.get(this.url + 'Goods/select/Type').then(response => {
					let isOk = response.data;
					//console.info(isOk.obj)
					if(isOk.success) {
						console.log("-------------")
						console.log(isOk.obj)
						this.getGoodsTreeList(isOk.obj)
						console.log("-------------")
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});
			},
			//整理后台数据
			getGoodsTreeList: function(datas) {
				this.baseData = [];
				for(var i = 0; i < datas.length; i++) {
//					if(datas[i].fpid == null) {
						this.baseData.push(this.getGoodsTreeChilds(datas, datas[i]));
//					}
				}
				console.log(this.baseData)
			},
			getGoodsTreeChilds: function(datas, data) {
				var obj = new Object;
				obj.title = data.fname;
				obj.fid = parseInt(data.fid);
				obj.fpid = parseInt(data.fpid);

				obj.children = [];
				for(let i = 0; i < datas.length; i++) {
					if(data.fid == datas[i].fpid) {
						obj.children.push(this.getGoodsTreeChilds(datas, datas[i]));
					}
				}
				if(obj.children.length == 0) {
					delete obj.children
				}
				return obj;

			},
			//选择物资类型
			choseGoodsType(index) {
				if(index.length == 0) {
					return;
				}
				this.parentTypeId = index[0].fid; //新增时候要ID
				this.parentType = index[0].title; //显示在页面
				this.getGoodInfoByGoodsId(index[0].fid) //根据ID获取物资
			},
			//根据物资类型 id加在表格数据
			getGoodInfoByGoodsId(goosId) {
				let param = {
					fgoodsid: goosId,
					pageCurrent: this.thisPage,
					pageSize: this.pageSize
				}
				this.$http.post(this.url + 'Goods/select/model', param).then(response => {
					let isOk = response.data;
					//console.info(isOk.obj)
					if(isOk.success) {
						console.log(isOk.obj.itemTotal)
						this.total = isOk.obj.itemTotal;
												this.items = isOk.obj.items;
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});
			}
		},
		mounted: function() {
			this.getGoodsType()
		},
	};
</script>

<style>

</style>